<template>
  <div class="spot">
    <div class="left">
      <img :src="it.imgurl" alt />
    </div>
    <div class="right">
      <div class="title">{{it.title}}</div>
      <div class="type" v-if="it.grade!=0">{{grade}}A景点</div>
      <div v-else style="height:20px;"></div>
      <div class="address">地址:&ensp;{{it.address}}</div>
      <div class="price" v-if="it.price_min">
        ￥
        <span class="large" >{{it.price_min}}</span>
        <span class="black">起</span>
      </div>
      <div class="look" @click="print()">查看详情</div>
    </div>
    <div style="clear:both;"></div>
  </div>
</template>

<script>
export default {
  props: {
    it: { style: Object },
    issceny:{default:false}
  },
  data() {
    return {
      grade: ""
      // it: {
      //   title: "深圳野生动物园",
      //   grade: "AAAA",
      //   price_min: "120",
      //   comm_cnt: null,
      //   cityId: "91",
      //   address: "广东省深圳市南山区西丽湖路4065号",
      //   sid: "3714",
      //   url: "http://www.ly.com/scenery/BookSceneryTicket_3714.html",
      //   imgurl:
      //     "http://pic4.40017.cn/scenery/destination/2017/03/01/11/HEl2Qf_240x135_00.jpg"
      // }
    };
  },
  created() {
    this.grade = this.it.grade.length;
    window.console.log(this.it);
    
  },

  methods: {
    print() {
      this.$store.commit("commons/setSpot", this.it);
      // window.console.log(this.$store.state.commons.spot);
      this.$axios
        .get(
          "/api/lifeservice/travel/GetScenery?sid=" +
            this.$store.state.commons.spot.sid +
            "&key=" +
            this.$store.state.commons.keyid
        )
        .then(res => {
          let data = res.data;
          if (data.result) {
            this.$store.commit("commons/setResult", data.result);
            this.$store.dispatch(
              "commons/getComments",
              this.$store.state.commons.spot.sid
            );
            this.$store.dispatch(
              "commons/getTuijianSpots",
              this.it.sid
            );
            if(this.issceny){
                this.$emit("top")
            }else{
              this.$router.push("/spot/sceny");
            }
            window.scrollTo(0,0);  
          } else {
            this.$message.error("暂时没有数据，可以尝试别的哦");
          }
        });
    }
  }
};
</script>

<style lang="less" scoped>
.spot {
  border: solid #ddd 1px;
  width: 800px;
  padding: 20px;
  margin: 20px auto;
  //   background: red;
  .left {
    float: left;
    img {
      display: block;
      width: 220px;
      height: 135px;
      object-fit: cover;
    }
  }
  .right {
    float: left;
    padding: 10px;
    width: 560px;
    height: 110px;
    position: relative;
    .title {
      font-size: 30px;
      color: rgb(6, 40, 78);
    }
    .type {
      width: 80px;
      text-align: center;
      margin: 3px;
      color: #ff7800;
      border: 1px solid #ff7800;
      border-radius: 4px;
    }
    .address {
      color: gray;
      position: absolute;
      bottom: 0px;
    }
    .price {
      width: 100px;
      height: 55px;
      color: #ff7800;
      position: absolute;
      right: 20px;
      top: 20px;
      .large {
        font-size: 30px;
      }
      .black {
        color: black;
      }
    }
    .look {
      position: absolute;
      width: 170px;
      height: 35px;
      background: #ff7800;
      color: white;
      font-size: 20px;
      text-align: center;
      line-height: 35px;
      top: 60px;
      right: 5px;
      &:hover {
        cursor: pointer;
        text-decoration: underline;
      }
    }
  }
}
</style>